import { FormValidator, rules } from "maishu-dilu";
import { MenuNode, Props as ComponentProps } from "./component";
import React = require("react");
import * as ui from "maishu-ui-toolkit";
import { PropEditor } from "maishu-jueying";

let h = React.createElement;

export interface MenuEditorState {
    // currentItem?: MenuNode;
}



type Link = {
    text: string,
    url: string
}

// let station = new StationService();

let links: Link[] = [
    { text: '请选择链接', url: '' },
    { text: '店铺主页', url: '#home_index' },
    { text: '购物车', url: '#shopping_shoppingCart' },
    { text: '会员主页', url: '#user_index' },
    { text: '商品类别', url: '#home_class' }
]

let icons = [
    "icon-home", "icon-shopping-cart", "icon-user", "icon-comment",
    "icon-rss", "icon-truck", "icon-reorder", "icon-calendar",
    "icon-th-large"
]



class MenuItemDialog extends React.Component<{ showIcon: boolean, configrm: (item) => void } & React.Props<MenuItemDialog>, { currentItem: MenuNode }> {
    element: HTMLElement;
    nameInput: HTMLInputElement;
    iconsElement: HTMLElement;
    urlInput: HTMLInputElement;
    validator: FormValidator;

    constructor(props) {
        super(props);

        this.state = { currentItem: ({} as any) };
    }
    componentDidMount() {
        let { required } = rules;
        this.validator = new FormValidator(this.element,
            { name: "name", rules: [required()] },
            { name: "url", rules: [required()], condition: () => this.isCustomUrl() }
        );
    }
    async save() {
        let isValid = await this.validator.check();
        if (!isValid) {
            return;
        }

        this.props.configrm(this.state.currentItem);
        this.hide();
        return Promise.resolve();
    }
    show(item?: MenuNode) {
        item = item || ({} as any);
        this.validator.clearErrors();
        this.setState({ currentItem: item });
        ui.showDialog(this.element);
    }
    hide() {
        ui.hideDialog(this.element);
    }
    toggleIconsPanel() {
        this.iconsElement.style.display ?
            this.iconsElement.style.removeProperty('display') :
            this.iconsElement.style.display = 'none';
    }
    private isCustomUrl() {
        let { currentItem } = this.state;
        if (currentItem == null)
            return false;

        let currentUrl = currentItem.url;
        let containsUrl = links.map(o => o.url).indexOf(currentUrl) >= 0;
        return !(containsUrl);
    }
    render() {
        let { showIcon } = this.props;
        let { currentItem } = this.state;
        return <div className="modal fade" ref={(e: HTMLElement) => this.element = e || this.element}>
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span className="sr-only">Close</span>
                        </button>
                        <h4 className="modal-title">添加菜单项</h4>
                    </div>
                    <div className="modal-body form-horizontal">
                        <div className="form-group">
                            <label className="col-sm-2 control-label">名称*</label>
                            <div className="col-sm-10">
                                <input name="name" type="text" className="form-control" placeholder="请输入菜单项名称"
                                    ref={(e: HTMLInputElement) => {
                                        if (!e) return;
                                        this.nameInput = e || this.nameInput
                                        e.value = currentItem.name || ''
                                        e.onchange = () => {
                                            currentItem.name = e.value;
                                        }
                                    }} />
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-sm-2 control-label">序号</label>
                            <div className="col-sm-10">
                                <input name="sortNumber" type="text" className="form-control" placeholder="请输入菜单项序号"
                                    ref={(e: HTMLInputElement) => {
                                        if (!e) return;
                                        e.value = currentItem.sortNumber as any || ''
                                        e.onchange = () => {
                                            currentItem.sortNumber = Number.parseInt(e.value);
                                        }
                                    }} />
                            </div>
                        </div>
                        {
                            showIcon ?
                                <div className="form-group">
                                    <label className="col-sm-2 control-label">图标</label>
                                    <div className="col-sm-10">
                                        <div className="input-group">
                                            <input name="icon" type="text" className="form-control" placeholder="请输入菜单项图标"
                                                ref={(e: HTMLInputElement) => {
                                                    if (!e) return;
                                                    e.value = currentItem.icon || ''
                                                    e.onchange = () => {
                                                        currentItem.icon = e.value;
                                                    }
                                                }} />
                                            <div className="input-group-addon"
                                                onClick={() => this.toggleIconsPanel()}>
                                                <i className="icon-cog" style={{ cursor: 'pointer' }} />
                                            </div>
                                            <div ref={(e: HTMLElement) => this.iconsElement = e || this.iconsElement} style={{
                                                position: 'absolute', height: 100, width: '100%', background: 'white',
                                                zIndex: 10, left: 0, top: 35, border: 'solid 1px #ccc', overflowY: 'auto',
                                                display: 'none'
                                            }}>
                                                <div style={{ position: 'absolute', width: '100%', borderBottom: 'solid 1px #ccc', padding: '4px 6px', background: 'white' }}>
                                                    <span>请选择图标</span>
                                                    <i className="icon-remove" style={{ position: 'absolute', right: 6, top: 6 }}
                                                        onClick={() => this.toggleIconsPanel()} />
                                                </div>
                                                <div style={{ padding: '30px 6px 6px 6px' }}>
                                                    {icons.map(o =>
                                                        <i key={o} className={o} style={{ display: 'table-cell', padding: 10, fontSize: 20 }}
                                                            onClick={() => {
                                                                currentItem.icon = o;
                                                                this.toggleIconsPanel();
                                                                this.setState(this.state);
                                                            }} />
                                                    )}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> : null
                        }
                        <div className="form-group">
                            <label className="col-sm-2 control-label">链接*</label>
                            <div className="col-sm-10">
                                <input name="url" className="form-control"
                                    style={{ display: this.isCustomUrl() ? null : 'none' }}
                                    ref={(e: HTMLInputElement) => {
                                        if (!e) return;
                                        this.urlInput = e;
                                        e.value = currentItem.url || '';
                                        e.onchange = () => {
                                            currentItem.url = e.value;
                                        }
                                    }} />
                                <select className="form-control"
                                    style={{ display: this.isCustomUrl() ? 'none' : null }}
                                    ref={(e: HTMLSelectElement) => {
                                        if (!e) return;
                                        e.value = currentItem.url;
                                        e.onchange = () => {
                                            let option = e.options[e.selectedIndex] as HTMLOptionElement;
                                            currentItem.url = option.value;
                                        }
                                    }}>
                                    {links.map((o, i) =>
                                        <option key={i} value={o.url}>
                                            {o.text}
                                        </option>
                                    )}

                                </select>
                            </div>
                        </div>
                        <div className="form-group">
                            <div className="col-sm-offset-2 col-sm-10">
                                <input type="checkbox"
                                    ref={(e: HTMLInputElement) => {
                                        if (!e) return;
                                        e.value = currentItem.url || '';
                                        e.checked = this.isCustomUrl();
                                        e.onchange = () => {
                                            if (e.checked) {
                                                currentItem.url = null;
                                                this.setState({ currentItem });
                                            }
                                            else {
                                                currentItem.url = "";
                                                this.setState({ currentItem })
                                            }
                                        }

                                    }} /> 自定义链接
                            </div>
                        </div>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" className="btn btn-primary"
                            ref={(e: HTMLButtonElement) => {
                                if (!e) return;
                                e.onclick = ui.buttonOnClick(() => this.save());
                            }}>确定</button>
                    </div>
                </div>
            </div>
        </ div>

    }
}

